<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>03数据绑定</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- shortcut icon”这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像,才有必要添加第二行使用icon -->
        <link rel ="shortcut icon" type="image/x-icon" href="../static/vue.jpg">
    </head>

    <body>
        <div id="测试01"><!-- 准备好一个容器测试01 -->
            <h1>{{name}}</h1>
        </div>
        <div id="测试02"><!-- 准备好一个容器测试02 -->
            <h1>{{name}}</h1>
        </div>
        <div id="测试03"><!-- 准备好一个容器测试03 -->
            <h1>{{name}}</h1>
        </div>
        <div id="测试04"><!-- 准备好一个容器测试04 -->
            <h1>{{name}}</h1>
        </div>
        <div id="测试05"><!-- 准备好一个容器测试05 -->
            <h1>{{name}}</h1>
        </div>
        <div id="测试06"><!-- 准备好一个容器测试06 -->
            <h1>{{name}}</h1>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    
    // el两种写法
        // el第一种写法
        new Vue({
            el:'#测试01',
            data:{
                name:'测试01',
            }
        })

        // el第二种写法
        const x = new Vue({
            data:{
                name:'测试02',
            }
        })
        x.$mount('#测试02')

        // el第二种写法定时器
        const y = new Vue({
            data:{
                name:'测试03',
            }
        })
        setTimeout(() => { // setTimeout(() => {}, 1000);定时器
            y.$mount('#测试03')
        }, 1000);

    //data的两种写法
        // data的第一种写法，对象式
        new Vue({
            el:'#测试04',
            data:{
                name:'测试04',
            }
        })

        // data的第二种写法，函数式
        new Vue({
            el:'#测试05',
            data:function() {
                return{
                    name:'测试05',
                }
            }
        })

        // data的第二种写法，函数式，简写：去掉function
        new Vue({
            el:'#测试06',
            data() {
                return{
                    name:'测试06',
                }
            }
        })
    </script>
</html>